<!--食品工厂用户可见-->
<template>
  <div class="firmForm">
    <!--      设置容器高度-->
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="100%" style="background-color: rgb(238, 241, 246)">
        <el-row :gutter="20">
          <el-col :span="100">
            <div class="grid-content bg-purple">
              <div class="grid-content bg-purple">
                <el-input
                  v-model="input"
                  placeholder="请输入"
                  class="input-with-select"
                >
                  <template #prepend>
                    <el-select ref="“optionRef”" v-model="select" clearable placeholder="请选择" style="width: 115px">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                  <template #append>
                    <el-button type="primary" icon="el-icon-search" plain @click="search">搜索</el-button>
                  </template>
                </el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="100">
            <div class="grid-content bg-purple">
              <el-button type="primary" icon="el-icon-plus" @click="addTransport">添加商品信息</el-button>
            </div>
          </el-col>
          <el-col :span="100">
            <div class="grid-content bg-purple">
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="load()"
              >
                刷新
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-dialog title="请仔细核对输入信息：" :visible.sync="dialogFormVisible">
          <el-form
            ref="vForm"
            :model="formData"
            :rules="rules"
            label-position="left"
            label-width="150px"
            size="medium"
            @submit.native.prevent
          >
            <el-row>
              <el-col :span="10" :offset="1" class="grid-cell">
                <el-form-item label="商品名称：" prop="comName" class="required label-center-align">
                  <el-input v-model="formData.comName" type="text" clearable suffix-icon="el-icon-house" />
                </el-form-item>
              </el-col>
              <el-col :span="10" :push="2" class="grid-cell">
                <el-form-item label="商品溯源码：" prop="comId" class="required label-center-align">
                  <el-input v-model="formData.comId" type="text" :disabled="!isAddForm" clearable suffix-icon="el-icon-s-goods" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="1" class="grid-cell">
                <el-form-item label="商品种类：" prop="kind" class="label-center-align">
                  <el-select
                    ref="“kindRef”"
                    v-model="formData.kind"
                    class="full-width-input"
                    placeholder="点击选择商品种类"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in kindOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10" :push="2" class="grid-cell">
                <el-form-item label="生产厂家：" prop="firmName" class="required label-center-align">
                  <el-input v-model="formData.firmName" type="text" clearable suffix-icon="el-icon-s-home" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="1" class="grid-cell">
                <el-form-item label="库存重量：" prop="weight" class="required label-center-align">
                  <el-input
                    v-model="formData.weight"
                    type="text"
                    placeholder="单位：吨（t)"
                    clearable
                    suffix-icon="el-icon-box"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2" class="grid-cell">
                <el-form-item label="保质期:" prop="expiration" class="required label-center-align">
                  <el-date-picker
                    v-model="formData.expiration"
                    type="date"
                    class="full-width-input"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择保质期截至时间"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22" :offset="1" class="grid-cell">
                <el-form-item label="备注:" prop="note" class="label-center-align">
                  <el-input v-model="formData.note" type="textarea" placeholder="选填" rows="2" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="addT">确 定</el-button>
          </div>
        </el-dialog>

        <el-scrollbar height="100px">
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            max-height="700px"
          >
            <el-table-column fixed type="index" label="序号" width="50" />
            <el-table-column prop="comId" label="商品溯源码" width="200" />
            <el-table-column fixed prop="comName" label="商品名称" width="200" />
            <el-table-column prop="kind" label="商品种类" width="150" />
            <el-table-column prop="weight" label="库存重量" width="100" />
            <el-table-column prop="firmName" label="生产厂家" width="250" />
            <el-table-column prop="expiration" label="保质期" width="150" />
            <el-table-column prop="note" label="备注" width="500" />
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button
                  link
                  type="warning"
                  size="small"
                  @click.prevent="alterRow(scope.row.comId)"
                >
                  修改
                </el-button>
                <el-button
                  link
                  type="danger"
                  size="small"
                  @click.prevent="deleteRow(scope.row.comId)"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-scrollbar>

      </el-aside>
    </el-container>
    <el-footer>
      <el-pagination
        background
        align="right"
        :current-page="currentPage"
        :page-sizes="[5,10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>

  </div>
</template>

<script>
import request from '@/request'

export default {
  name: 'CommodityManagement',

  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      isAddForm: false,
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
      input: '',
      select: '',
      options: [{
        value: 'ComId',
        label: '商品溯源码'
      }, {
        value: 'ComName',
        label: '商品名称'
      }, {
        value: 'kind',
        label: '商品种类'
      }],
      value: '',
      tableData: [],
      formData: {
        comName: '',
        comId: '',
        kind: 1,
        firmName: '',
        weight: '',
        expiration: '',
        note: ''
      },
      rules: {
        comName: [{
          required: true,
          message: '商品名称不可为空'
        }],
        comId: [{
          required: true,
          message: '商品溯源码不可为空'
        }, {
          pattern: /^[A-Za-z0-9]+$/,
          trigger: ['blur', 'change'],
          message: '仅能为字母和数字组成'
        }],
        firmName: [{
          required: true,
          message: '生产企业不可为空'
        }],
        weight: [{
          required: true,
          message: '重量不可为空'
        }, {
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: '重量仅能为数字'
        }],
        expiration: [{
          required: true,
          message: '保质期不可为空'
        }]
      },
      kindOptions: [{
        'label': '水果',
        'value': 1
      }, {
        'label': '蔬菜',
        'value': 2
      }, {
        'label': '肉类',
        'value': 3
      }, {
        'label': '海鲜',
        'value': 4
      }, {
        'label': '乳制品',
        'value': 5
      }, {
        'label': '零食',
        'value': 6
      }, {
        'label': '面包糕点',
        'value': 7
      }, {
        'label': '饮料',
        'value': 8
      }
      ]
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.input = ''
      this.loading = true
      request.get('/commoditySurper/pageAll', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        setTimeout(() => {
          this.loading = false
        }, 300)
        this.$notify({
          type: 'success',
          message: '读取成功!',
          offset: 70
        })
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val
      if (this.input === '') {
        this.load()
      } else {
        this.search()
      }
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val
      if (this.input === '') {
        this.load()
      } else {
        this.search()
      }
    },
    deleteRow(index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete('/commoditySurper/delById/' + index).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.load() // 删除之后重新加载表格的数据
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      console.log('这里进行删除一行')
    },
    alterRow(index) {
      this.dialogFormVisible = true
      this.isAddForm = false
      this.formData.comId = index
    },
    search() {
      const choose = this.$refs['“optionRef”'].selected.value
      if (choose === '') {
        this.$message({
          type: 'warning',
          message: '请选择查询类型'
        })
        return
      }
      if (this.input === '') {
        this.$message({
          type: 'warning',
          message: '输入不可为空'
        })
        return
      }
      this.loading = true
      if (choose === 'ComId') {
        request.get('/commoditySurper/findById/' + this.input).then(res => {
          console.log(res)
          if (res.code === 20000) {
            this.tableData = res.data
            this.$message({
              type: 'success',
              message: '物流批次码搜索结束'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      } else if (choose === 'ComName') {
        request.get('/commoditySurper/findByComName', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            comName: this.input
          }
        }).then(res => {
          if (res.code === 20000) {
            this.tableData = res.data.records
            this.total = res.data.total
            this.$message({
              type: 'success',
              message: '产品名称搜索结束'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      } else {
        request.get('/commoditySurper/findByKind', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            kind: this.input
          }
        }).then(res => {
          if (res.code === 20000) {
            this.tableData = res.data.records
            this.total = res.data.total
            console.log(res.data.records)
            this.$message({
              type: 'success',
              message: '商品种类搜索结束'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }

      setTimeout(() => {
        this.loading = false
      }, 300)
    },
    addTransport() {
      this.isAddForm = true
      this.dialogFormVisible = true
    },
    addT() {
      const kind = this.$refs['“kindRef”'].selected.label
      this.$refs['vForm'].validate(valid => {
        if (!valid) {
          this.$message({
            type: 'warning',
            message: '警告：请检查填写信息'
          })
          return
        }
        // TODO: 提交表单
        if (this.isAddForm) {
          if (this.formData.comId === '') {
            this.$message({
              type: 'warning',
              message: '警告：未填写表单'
            })
            return
          }
          request.get('/commoditySurper/add', {
            params: {
              comId: this.formData.comId,
              comName: this.formData.comName,
              kind: kind,
              weight: this.formData.weight,
              firmName: this.formData.firmName,
              expiration: this.formData.expiration,
              note: this.formData.note
            }
          }).then(res => {
            if (res.code === 20000) {
              this.load()
              this.dialogFormVisible = false
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        } else {
          request.get('/commoditySurper/update', {
            params: {
              comId: this.formData.comId,
              comName: this.formData.comName,
              kind: kind,
              weight: this.formData.weight,
              firmName: this.formData.firmName,
              expiration: this.formData.expiration,
              note: this.formData.note
            }
          }).then(res => {
            if (res.code === 20000) {
              this.load()
              this.dialogFormVisible = false
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        }
        this.$refs['vForm'].resetFields()
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.$refs['vForm'].resetFields()
      this.$message({
        type: 'info',
        message: '已取消操作'
      })
    }
  }
}
</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>
